<template>
	<view class="user-container">
		<!-- 登录前显示 -->
		<view v-if="!isLoggedIn" class="login-prompt">
			<view class="avatar-placeholder"></view>
			<text class="login-text">登录享受更多服务</text>
			<button class="login-btn" @click="goToLogin">立即登录/注册</button>
		</view>
		
		<!-- 登录后显示 -->
		<view v-else class="user-info">
			<view class="avatar">
				<view class="avatar-img" @click="selectImage">
					<input type="file" name="image" style="display: none;" />
				</view>
			</view>
			<view class="user-details">
				<text class="username">{{ username }}</text>
				<text class="welcome">欢迎回来</text>
			</view>
		</view>
		
		<view class="menu-section">
			<view class="menu-item">
				<text class="menu-icon">📦</text>
				<text class="menu-text">我的订单</text>
				<text class="menu-arrow">›</text>
			</view>
			<view class="menu-item">
				<text class="menu-icon">❤️</text>
				<text class="menu-text">我的收藏</text>
				<text class="menu-arrow">›</text>
			</view>
			<view class="menu-item">
				<text class="menu-icon">🎁</text>
				<text class="menu-text">优惠券</text>
				<text class="menu-arrow">›</text>
			</view>
			<view class="menu-item">
				<text class="menu-icon">⚙️</text>
				<text class="menu-text">设置</text>
				<text class="menu-arrow">›</text>
			</view>
		</view>
		
		<button v-if="isLoggedIn" class="logout-btn" @click="logout">退出登录</button>
	</view>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      username: ''
    };
  },
  
  selectImage() {
    // 触发文件选择器
    uni.chooseImage({
      count: 1,
      success: (res) => {
        // 上传选中的图片到服务器
        uni.uploadFile({
          url: 'http://localhost:8080/user/uploadAvatar',
          filePath: res.tempFilePaths[0],
          name: 'image',
          success: (uploadRes) => {
            // 上传成功后更新用户头像URL
            const avatarUrl = JSON.parse(uploadRes.data).data;
            uni.setStorageSync('avatarUrl', avatarUrl);
            this.avatarUrl = avatarUrl;
          }
        });
      }
    });
  },
  
  onShow() {
    // 页面显示时检查登录状态，确保从登录页面返回后能更新状态
    this.checkLoginStatus();
  },
  
  methods: {
    checkLoginStatus() {
      // 检查登录状态
      const loginStatus = uni.getStorageSync('isLoggedIn');
      const storedUsername = uni.getStorageSync('username');
      
      if (loginStatus && storedUsername) {
        this.isLoggedIn = true;
        this.username = storedUsername;
      } else {
        this.isLoggedIn = false;
        this.username = '';
      }
    },
    
    goToLogin() {
      uni.navigateTo({
        url: '/pages/auth/login'
      });
    },
    
    logout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除登录状态
            uni.removeStorageSync('isLoggedIn');
            uni.removeStorageSync('username');
            this.isLoggedIn = false;
            this.username = '';
            
            uni.showToast({
              title: '已退出登录',
              icon: 'none'
            });
          }
        }
      });
    }
  }
}
</script>

<style>
.user-container {
	padding: 20rpx;
	background-color: #f8f8f8;
	min-height: 100vh;
}

/* 登录提示样式 */
.login-prompt {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #fff;
	border-radius: 10rpx;
	padding: 60rpx 30rpx;
	margin-bottom: 30rpx;
}

.avatar-placeholder {
	width: 180rpx;
	height: 180rpx;
	background-color: #e0e0e0;
	border-radius: 50%;
	margin-bottom: 30rpx;
}

.login-text {
	font-size: 32rpx;
	color: #666;
	margin-bottom: 30rpx;
}

.login-btn {
	width: 280rpx;
	height: 80rpx;
	background-color: #FF6B6B;
	color: #fff;
	font-size: 28rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
}

.login-btn:active {
	opacity: 0.8;
}

/* 登录后用户信息样式 */
.user-info {
	display: flex;
	align-items: center;
	background-color: #FF6B6B;
	border-radius: 10rpx;
	padding: 40rpx;
	margin-bottom: 30rpx;
	color: #fff;
}

.avatar {
	margin-right: 30rpx;
}

.avatar-img {
	width: 140rpx;
	height: 140rpx;
	background-color: #fff;
	border-radius: 50%;
}

.username {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.welcome {
	font-size: 28rpx;
	opacity: 0.9;
}

/* 菜单样式 */
.menu-section {
	background-color: #fff;
	border-radius: 10rpx;
	margin-bottom: 30rpx;
	overflow: hidden;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	font-size: 32rpx;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-icon {
	font-size: 36rpx;
	margin-right: 20rpx;
}

.menu-text {
	flex: 1;
	color: #333;
}

.menu-arrow {
	color: #999;
	font-size: 36rpx;
}

/* 退出登录按钮 */
.logout-btn {
	width: 100%;
	height: 90rpx;
	background-color: #fff;
	color: #FF6B6B;
	font-size: 32rpx;
	border-radius: 10rpx;
}

.logout-btn:active {
	background-color: #f5f5f5;
}
</style>